<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="客户编码">
              <a-input placeholder="请输入客户编码" v-model="queryParam.customerCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="客户名称">
              <a-input placeholder="请输入客户名称" v-model="queryParam.customerName"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="客户品番">
                <a-input placeholder="请输入客户品番" v-model="queryParam.customerSkuCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="品番编码">
                <a-input placeholder="请输入品番编码" v-model="queryParam.skuCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="品番名称">
                <a-input placeholder="请输入品番名称" v-model="queryParam.skuName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="品牌">
                <a-input placeholder="请输入品牌" v-model="queryParam.brand"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="发票号">
                <a-input placeholder="请输入发票号" v-model="queryParam.invoiceNum"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="集装箱号">
                <a-input placeholder="请输入集装箱号" v-model="queryParam.containerNum"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="货位">
                <a-input placeholder="请输入货位" v-model="queryParam.location"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('PT库存表')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="createOutOrder">生成出库单</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
      </a-table>
    </div>

    <OutOrderPtModal ref="modalForm" @ok="modalFormOk"></OutOrderPtModal>
  </a-card>
</template>

<script>

  import '@assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import OutOrderPtModal from './modules/OutPtModal.vue'
  import { postAction } from '@api/manage'

  export default {
    name: 'OutPtList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      OutOrderPtModal
    },
    data () {
      return {
        description: 'PT库存表管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '入库时间',
            align: "center",
            dataIndex: 'inTime',
            sorter: true
          },
          {
            title: '客户编码',
            align: "center",
            dataIndex: 'customerCode'
          },
          {
            title: '客户名称',
            align: "center",
            dataIndex: 'customerName'
          },
          {
            title: '品番编码',
            align: "center",
            dataIndex: 'skuCode'
          },
          {
            title: '品番名称',
            align: "center",
            dataIndex: 'skuName'
          },
          {
            title: '品牌',
            align: "center",
            dataIndex: 'brand'
          },
          {
            title: '剩余个数',
            align: "center",
            dataIndex: 'number'
          },
          {
            title: '发票号',
            align: "center",
            dataIndex: 'invoiceNum'
          },
          {
            title: '集装箱号',
            align: "center",
            dataIndex: 'containerNum'
          },
          {
            title: '来源(国别或其他)',
            align: "center",
            dataIndex: 'source'
          },
          {
            title: '长',
            align: "center",
            dataIndex: 'length'
          },
          {
            title: '宽',
            align: "center",
            dataIndex: 'width'
          },
          {
            title: '高',
            align: "center",
            dataIndex: 'height'
          },
          {
            title: '单个重量(g)',
            align: "center",
            dataIndex: 'weight'
          },
          {
            title: '货位',
            align: "center",
            dataIndex: 'location'
          },
          {
            title:'箱数',
            align:"center",
            dataIndex: 'boxNum'
          },
        ],
        url: {
          list: "/inventoryPt/inventoryPt/list",
          createOutOrder: "inventoryPt/inventoryPt/createOutOrder",
          exportXlsUrl: "/inventoryPt/inventoryPt/exportXls"
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
    this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      createOutOrder() {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！')
          return
        }
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        this.loading = true;
        postAction(this.url.createOutOrder + "?ids=" + ids).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
            this.onClearSelected();
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'customerCode',text:'客户编码',dictCode:''})
        fieldList.push({type:'string',value:'customerName',text:'客户名称',dictCode:''})
        fieldList.push({type:'string',value:'customerSkuCode',text:'客户品番',dictCode:''})
        fieldList.push({type:'string',value:'skuCode',text:'品番编码',dictCode:''})
        fieldList.push({type:'string',value:'skuName',text:'品番名称',dictCode:''})
        fieldList.push({type:'string',value:'brand',text:'品牌',dictCode:''})
        fieldList.push({type:'string',value:'number',text:'个数',dictCode:''})
        fieldList.push({type:'string',value:'invoiceNum',text:'发票号',dictCode:''})
        fieldList.push({type:'string',value:'containerNum',text:'集装箱号',dictCode:''})
        fieldList.push({type:'string',value:'source',text:'来源(国别或其他)',dictCode:''})
        fieldList.push({type:'BigDecimal',value:'length',text:'长',dictCode:''})
        fieldList.push({type:'BigDecimal',value:'width',text:'宽',dictCode:''})
        fieldList.push({type:'BigDecimal',value:'height',text:'高',dictCode:''})
        fieldList.push({type:'BigDecimal',value:'weight',text:'单个重量(g)',dictCode:''})
        fieldList.push({type:'string',value:'location',text:'货位',dictCode:''})
        fieldList.push({type:'double',value:'boxNum',text:'箱数',dictCode:''})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>